<!-- 监察统计 -->
<template>
<div class="loading-box" v-loading="!countFlag" element-loading-background="rgba(0, 0, 0, 0.1)">
  <div v-if="countFlag" class="monitor-count animate__animated animate__fadeInLeft">
    <!-- 标题 -->
    <div class="monitor-top">
      <CountTop :revTitle="'预警监管'"></CountTop>
    </div>
    <!-- 主体 -->
    <div class="monitor-main">
      <!-- 1/3 -->
      <div class="monitor-box">
        <!-- 中标题 -->
        <div class="m-title">
          <div class="title-text">检验检测</div>
          <div class="title-info">
            <p class="info-text">
              <span>检验到期提醒: </span>
              <span>{{topData1.warning_num || '0'}}</span>
            </p>
            <p class="info-text">
              <span>超期未检提醒: </span>
              <span>{{topData1.danger_num || '0'}}</span>
            </p>
          </div>
        </div>
        <!-- 数据区 -->
        <div class="m-item">
          <!-- 表数据 -->
          <div class="item-box item-table">
            <div class="table-title">超期未检</div>
            <ul class="table-box">
              <li>
                <span>使用单位</span>
                <span>设备类型</span>
                <span>到期时间</span>
              </li>
              <!-- <li>
                <span>年检</span>
                <span>2020-10-29</span>
                <span>A单位</span>
              </li> -->
              <template v-if="topList1.length > 0">
                <li v-for="(item,i) in topList1" :key="i">
                  <span>{{item.com_name}}</span>
                  <span>{{item.dev_type}}</span>
                  <span>{{item.next_check_date}}</span>
                </li>
              </template>
            </ul>
          </div>
          <!-- 图表数据 -->
          <div class="item-box item-chart">
            <div class="chart-box">
              <PublicEcharts
                :option="this.overdueData"
                :title="'超期未检统计'"
                :id="'overdue1'"
                ref="overdue1"
              ></PublicEcharts>
            </div>
          </div>
          <!-- 图表数据 -->
          <div class="item-box item-chart">
            <div class="chart-box">
              <PublicEcharts
                :option="this.inspectorData"
                :title="'检验人员持证率'"
                :id="'inspector1'"
                ref="inspector1"
              ></PublicEcharts>
            </div>
          </div>
        </div>
      </div>
      <!-- 2/3 -->
      <div class="monitor-box">
        <!-- 中标题 -->
        <div class="m-title">
          <div class="title-text">监察执法</div>
          <div class="title-info">
            <p class="info-text">
              <span>任务签收提醒: </span>
              <span>{{topData2.qs || 0}}</span>
            </p>
            <p class="info-text">
              <span>任务到期提醒: </span>
              <span>{{topData2.dq || 0}}</span>
            </p>
          </div>
        </div>
        <!-- 数据区 -->
        <div class="m-item">
          <!-- 表数据 -->
          <div class="item-box item-table">
            <div class="table-title">任务到期</div>
            <ul class="table-box">
              <li>
                <span>任务名称</span>
                <span>开始时间</span>
                <span>到期时间</span>
              </li>
              <!-- <li>
                <span>上级派发</span>
                <span>2020-10-29</span>
                <span>5</span>
                <span>A单位</span>
              </li> -->
              <template v-if="topList2.length > 0">
                <li v-for="(item,i) in topList2" :key="i">
                  <span>{{item.plan_title}}</span>
                  <span>{{item.start_time}}</span>
                  <span>{{item.over_time}}</span>
                </li>
              </template>
            </ul>
          </div>
          <!-- 图表数据 -->
          <div class="item-box item-chart">
            <div class="chart-box">
              <PublicEcharts
                :option="this.taskLoad"
                :title="'任务量、签收量趋势'"
                :id="'taskLoad1'"
                ref="taskLoad1"
              ></PublicEcharts>
            </div>
          </div>
          <!-- 图表数据 -->
          <div class="item-box item-chart">
            <div class="chart-box">
              <PublicEcharts
                :option="this.overType"
                :title="'超期类型占比'"
                :id="'overType1'"
                ref="overType1"
              ></PublicEcharts>
            </div>
          </div>
        </div>
      </div>
      <!-- 3/3 -->
      <div class="monitor-box">
        <!-- 中标题 -->
        <div class="m-title">
          <div class="title-text">隐患处置</div>
          <div class="title-info">
            <p class="info-text">
              <span>隐患总数: </span>
              <span>0</span>
            </p>
            <p class="info-text">
              <span>整改到期提醒: </span>
              <span>0</span>
            </p>
          </div>
        </div>
        <!-- 数据区 -->
        <div class="m-item">
          <!-- 表数据 -->
          <div class="item-box item-table">
            <div class="table-title">整改到期</div>
            <ul class="table-box">
              <li>
                <span>隐患类型</span>
                <span>到期时间</span>
                <span>目标单位</span>
              </li>
              <!-- <li>
                <span>上级派发</span>
                <span>2020-10-29</span>
                <span>A单位</span>
              </li> -->
              <template v-if="topList3.length > 0">
                <li v-for="(item,i) in topList3" :key="i">
                  <span>{{item.origin}}</span>
                  <span>{{item.over_time}}</span>
                  <span>{{item.com_name}}</span>
                </li>
              </template>
            </ul>
          </div>

          <!-- 图表数据 -->
          <div class="item-box item-chart">
            <div class="chart-box">
              <PublicEcharts
                :option="this.hiddenTimeData"
                :title="'隐患时间统计(本年度)'"
                :id="'hiddenTime1'"
                ref="hiddenTime1"
              ></PublicEcharts>
            </div>
          </div>

          <!-- 图表数据 -->
          <div class="item-box item-chart">
            <div class="chart-box">
              <PublicEcharts
                :option="this.hiddenMonthData"
                :title="'隐患月份统计(本季度)'"
                :id="'hiddenMonth1'"
                ref="hiddenMonth1"
              ></PublicEcharts>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import PublicEcharts from "../components/charts/PublicEcharts";
import {
  getOverdue,
  getInspector,
  getHiddenMonth,
  getLineDouble,
} from "../utils/chartOption/monitorCountOption";
import CountTop from "../components/container/CountTop";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { PublicEcharts, CountTop },

  //父组件传入子组件数据
  props: {},

  //格式化数据
  filters: {},

  data() {
    //这里存放数据
    return {
      countFlag: false,
      overdueData: getOverdue(), // 检验到期
      inspectorData: getInspector(), // 检验人员...
      taskLoad: getLineDouble(), // 任务量、签收量...
      overType: getInspector(), // 超期类型占比
      hiddenMonthData: getHiddenMonth(), // 隐患季度
      hiddenTimeData: getOverdue(), // 隐患年度
      topData1: {},
      topList1: [],
      topData2: {},
      topList2: [],
      topData3: {},
      topList3: [],
    };
  },

  //计算属性 类似于data概念
  computed: {},

  //监控data中的数据变化
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init();
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},

  //方法集合
  methods: {
    async init() {
      // 检验检测
      let ret1 = await this.$http.getJyjc();
      if (ret1.data.errorCode != 0) {
        that.$message({
          showClose: true,
          message: "系统忙！",
          type: "error",
        });
        return;
      }
      this.topData1 = ret1.data.data.topData
      this.topList1 = ret1.data.data.extendedData
      let arr1 = this.formatArr(ret1.data.data.checkPeopleData)
      this.inspectorData = getInspector(arr1)
      let arr2 = this.formatArr(ret1.data.data.extendedCharData)
      this.overdueData = getOverdue(arr2)

      // 监察执法
      let ret2 = await this.$http.getJczf();
      if (ret2.data.errorCode != 0) {
        that.$message({
          showClose: true,
          message: "系统忙！",
          type: "error",
        });
        return;
      }
      this.topData2 = ret2.data.data.topData
      this.topList2 = ret2.data.data.extendedData

      let arr31 = this.formatArr(ret2.data.data.renwuData)
      let arr32 = this.formatArr(ret2.data.data.qianshouData)
      let arrs = {}
      arrs.types = arr31.types
      arrs.data1 = {
        name: '任务量',
        arr: arr31.data
      }
      arrs.data2 = {
        name: '签收量',
        arr: arr32.data
      }
      this.taskLoad = getLineDouble(arrs)

      let arr4 = this.formatArr(ret2.data.data.cqTypeData)
      this.overType = getInspector(arr4)

      // 隐患处置
      let ret3 = await this.$http.getYhcz();
      if (ret3.data.errorCode != 0) {
        that.$message({
          showClose: true,
          message: "系统忙！",
          type: "error",
        });
        return;
      }
      // console.log(ret3.data.data);
      this.topData3 = ret3.data.data.topData
      this.topList3 = ret3.data.data.zgdqData
      let arr5 = this.formatArr(ret3.data.data.yearData)
      this.hiddenTimeData = getOverdue(arr5)
      let arr6 = this.formatArr(ret3.data.data.yhsjData)
      this.hiddenMonthData = getHiddenMonth(arr6)



      // 解锁 -------------------------------------------------
      this.countFlag = true
    },

    formatArr(data) {
      let arr = { types: [], data: [] };
      data.forEach((ele) => {
        arr.types.push(ele.name);
        arr.data.push(ele.total);
      });
      return arr;
    },
  },
};
</script>

<style scoped lang='less'>
/* 使用$符号可以标识一个变量;@import url(); 引入公共css类 */
.loading-box {
    width: 100%;
    height: 100%;
}
.monitor-count {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation-duration: 0.5s;
  .monitor-top {
    width: 100%;
    height: 10%;
  }
  .monitor-main {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .monitor-box {
      width: 31%;
      height: 90%;
      box-sizing: border-box;
      border: 4px solid @FontBlue;
      padding: 0 1%;
      border-radius: 0.04rem;
      transition: all 0.4s;
      .m-title {
        width: 100%;
        height: 15%;
        .title-text {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.24rem;
          font-weight: 700;
          color: @Blue;
          box-sizing: border-box;
          border-bottom: 1px solid #ccc;
        }
        .title-info {
          width: 100%;
          height: 50%;
          display: flex;
          border-bottom: 1px solid #ccc;
          background-color: rgba(14, 28, 136, 0.6);
          .info-text {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #eee;
            font-size: 0.18rem;
            span {
              padding: 0 0.1rem;
            }
          }
        }
      }
      .m-item {
        width: 100%;
        height: 85%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .item-box {
          width: 100%;
          flex: 1;
        }
        .item-table {
          box-sizing: border-box;
          .table-title {
            width: 100%;
            height: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.2rem;
            font-weight: 700;
            color: #eee;
          }
          .table-box {
            width: 100%;
            height: 65%;
            li {
              width: 100%;
              height: 33%;
              display: flex;
              box-sizing: border-box;
              span {
                display: flex;
                height: 100%;
                flex: 1;
                justify-content: center;
                align-items: center;
                font-size: 0.16rem;
                color: #eee;
                box-sizing: border-box;
                border: 1px solid #ccc;
              }
            }
            li:first-child {
              background-color: @Blue;
            }
          }
        }
        .item-chart {
          display: flex;
          justify-content: center;
          align-items: center;
          .chart-box {
            width: 100%;
            height: 95%;
          }
          .chart-box.todo {
            background-color: hotpink;
          }
        }
      }
    }
    .monitor-box:hover {
      border-color: #ccc;
    }
  }
}
</style>